<!DOCTYPE html>
<html lang="en">
<head>
    <title>第九届品质论坛开幕式</title>
    <link rel="import" href="../common/head.html?__inline">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/node_modules/animate.css/animate.css">
    <link rel="stylesheet" href="/node_modules/swiper/dist/css/swiper.css">
    <link rel="stylesheet" href="/node_modules/video.js/dist/video-js.css">
    <link rel="stylesheet" href="index.less">
    <script src="/web/lib/flexible.js"></script>

</head>
<body>

<audio id="music" src="/web/video/music.mp3" autoplay loop></audio>
<div class="icon-music ani-music"></div>

<div class="swiper-container main-swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide slide1">
            <link rel="import" href="../common/element-down.html?__inline">
            <!--<img class="bg-img1 ani" src="img/slide1-top.png">
            <img class="bg-img2 ani" src="img/slide1-middle.png">
            <img class="bg-img3 ani" src="img/slide1-bottom.png">-->
            <div class="main-box swiper-to ani">
                <img src="img/slide1-main.png">
                <img class="ele-print ani-print" src="img/slide1-print.png">

                <div class="ele-txt1">Start</div>
                <div class="ele-txt2">智启品质之旅</div>
            </div>
        </div>
        <div class="swiper-slide slide2">
            <link rel="import" href="../common/element-down.html?__inline">

            <div class="main-box ani" swiper-animate-effect="zoomIn">
                <img class="logo ani" src="/web/img/logo.png" swiper-animate-effect="zoomIn" swiper-animate-delay="0.6s">
                <img class="tit1 ani" src="/web/img/tit1.png" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.9s">
                <img class="tit2 ani" src="/web/img/tit2.png" swiper-animate-effect="fadeInDown" swiper-animate-delay="1.2s">
                <img class="date ani" src="img/slide2-date.png" swiper-animate-effect="fadeInDown" swiper-animate-delay="1.5s">
                <img class="cont ani" src="img/slide2-cont.png" swiper-animate-effect="zoomIn" swiper-animate-delay="1.5s">
            </div>
            <link rel="import" href="../common/element-bottom.html?__inline">
        </div>

        <div class="swiper-slide slide3">
            <link rel="import" href="../common/element-top.html?__inline">
            <link rel="import" href="../common/element-down.html?__inline">

            <img class="txt ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.6s" src="img/slide3-txt.png">
            <img class="txt1 ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.9s" src="img/slide3-txt1.png">
            <img class="house ani" swiper-animate-effect="zoomIn" swiper-animate-delay="1.2s" src="img/slide3-house.png">
            <img class="img1 ani" swiper-animate-effect="zoomIn" swiper-animate-delay="1.5s" src="img/slide3-img1.png">
            <img class="img ani" swiper-animate-effect="zoomIn" swiper-animate-delay="2s" src="img/slide3-img.png">
        </div>

        <div class="swiper-slide slide4">
            <link rel="import" href="../common/element-top.html?__inline">
            <link rel="import" href="../common/element-bottom.html?__inline">
            <link rel="import" href="../common/element-down.html?__inline">

            <img class="tit ani" src="img/slide4-tit.png" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.3s">
            <!--<img class="box-bg ani" src="img/slide4-box-bg.png" alt="">-->
            <div class="txt1 ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.6s">以高品质护航公司“智行科技“产品，直面市场的机遇与挑战，引领东风日产&东风启辰在” i<sup>3</sup> “（智行科技、智造品质、智享体验）的道路上更顺畅地向前行进 ，  实现“用品质感动生活”的中期品质愿景。</div>
            <img class="img ani" src="img/slide4-img.jpg" swiper-animate-effect="fadeInLeft" swiper-animate-delay="0.9s">
            <div class="txt2 ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="1.2s">2018年，新技术品质保证元年</div>
        </div>

        <div class="swiper-slide slide5">
            <link rel="import" href="../common/element-top.html?__inline">
            <link rel="import" href="../common/element-bottom.html?__inline">
            <link rel="import" href="../common/element-down.html?__inline">

            <div class="title ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.3s">领导寄语</div>
            <div class="video ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="0.6s">
                <video id="video" class="video-js vjs-default-skin" controls x-webkit-airplay="true" webkit-playsinline="true" playsinline>
                    <source src="/web/video/video1.mp4" type='video/mp4' />
                </video>
            </div>
            <dl class="txt-box">
                <dt class="ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.9s">埃尔顿.谷硕</dt>
                <dd class="ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="1.2s">东风汽车有限公司副总裁</dd>
                <dd class="ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="1.5s">东风日产乘用车公司总经理</dd>
            </dl>
        </div>

        <!--<div class="swiper-slide slide6">
            <link rel="import" href="../common/element-top.html?__inline">
            <link rel="import" href="../common/element-bottom.html?__inline">
            <link rel="import" href="../common/element-down.html?__inline">

            <div class="title ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.3s">活动安排</div>
            <div class="txt-box">
                <dl>
                    <dt class="ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.4s">主会场活动安排</dt>
                    <dd class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="0.5s">主会场展示区</dd>
                    <dd class="ani" swiper-animate-effect="fadeInRight" swiper-animate-delay="0.6s">品质论坛开幕式</dd>
                    <dd class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="0.7s">总部长演讲会</dd>
                    <dd class="ani" swiper-animate-effect="fadeInRight" swiper-animate-delay="0.8s">供应商专题日</dd>
                    <dd class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="0.9s">新技术行业专家演讲会</dd>
                    <dd class="ani" swiper-animate-effect="fadeInRight" swiper-animate-delay="1s">汽车之家演讲会及质量奖颁奖仪式及主会场闭幕式</dd>
                </dl>
                <dl>
                    <dt class="ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="1.3s">四地七大分会场</dt>
                    <dd class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="1.4s">花都1 工厂分会场</dd>
                    <dd class="ani" swiper-animate-effect="fadeInRight" swiper-animate-delay="1.5s">花都2工厂分会场</dd>
                    <dd class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="1.6s">襄阳分会场</dd>
                    <dd class="ani" swiper-animate-effect="fadeInRight" swiper-animate-delay="1.7s">郑州分会场</dd>
                    <dd class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="1.8s">大连分会场</dd>
                    <dd class="ani" swiper-animate-effect="fadeInRight" swiper-animate-delay="1.9s">DNTC分会场</dd>
                    <dd class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="2s">DNEC分会场</dd>
                </dl>
            </div>
        </div>-->

        <div class="swiper-slide slide7" data-type="7">
            <link rel="import" href="../common/element-top.html?__inline">
            <link rel="import" href="../common/element-bottom.html?__inline">
            <link rel="import" href="../common/element-down.html?__inline">

            <div class="title ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.3s">会场平面图 <br>（主会场）</div>

            <div class="cont-box">
                <img class="box-bg ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.6s" src="img/slide6-box-bg.png">
                <img class="box-bg1 ani" swiper-animate-effect="fadeIn" swiper-animate-delay="1s" src="img/slide6-box-bg1.png">

                <img class="btn-into ani" swiper-animate-effect="zoomIn" swiper-animate-delay="2s" src="img/slide6-into.png">
                <img class="btn-img1 ani" swiper-animate-effect="zoomIn" swiper-animate-delay="1.2s" src="img/slide6-img1.png">
                <img class="btn-img2 ani alert-open" data-key="1-2" swiper-animate-effect="zoomIn" swiper-animate-delay="1.4s" src="img/slide6-img2.png">
                <img class="btn-img3 ani alert-open" data-key="1-3" swiper-animate-effect="zoomIn" swiper-animate-delay="1.6s" src="img/slide6-img3.png">
                <img class="btn-img4 ani alert-open" data-key="1-4" swiper-animate-effect="zoomIn" swiper-animate-delay="1.8s" src="img/slide6-img4.png">
            </div>
        </div>

        <div class="swiper-slide slide8">
            <link rel="import" href="../common/element-top.html?__inline">
            <link rel="import" href="../common/element-bottom.html?__inline">
            <link rel="import" href="../common/element-down.html?__inline">

            <div class="title ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.3s">主会场活动安排</div>

            <div class="cont-box ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.6s">
                <table>
                    <tr class="one ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.9s">
                        <th width="30%">活动项目</th>
                        <th width="22%">活动地点</th>
                        <th width="22%">活动日期</th>
                        <th width="26%">活动时间</th>
                    </tr>
                    <tr class="two ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="1.2s">
                        <td>主会场<br>展示区</td>
                        <td>天马行空<br>展厅</td>
                        <td>9月17日-<br>9月21日</td>
                        <td>08:30-18:00</td>
                    </tr>
                    <tr class="thr ani" swiper-animate-effect="fadeInRight" swiper-animate-delay="1.5s">
                        <td>品质论坛<br>开幕式</td>
                        <td>学术<br>报告厅</td>
                        <td>9月17日</td>
                        <td>09:00-10:20</td>
                    </tr>
                    <tr class="four ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="1.8s">
                        <td>总部长<br>演讲会</td>
                        <td>学术<br>报告厅</td>
                        <td>9月18日</td>
                        <td>14:00-16:00</td>
                    </tr>
                    <tr class="five ani" swiper-animate-effect="fadeInRight" swiper-animate-delay="2.1s">
                        <td>供应商专题日</td>
                        <td>企业大学</td>
                        <td>9月19日</td>
                        <td>08:40-18:00</td>
                    </tr>
                    <tr class="six ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="2.1s">
                        <td>质量学院<br>挂牌仪式</td>
                        <td>企业大学</td>
                        <td>9月20日</td>
                        <td>11:30-12:00</td>
                    </tr>
                    <tr class="six ani" swiper-animate-effect="fadeInRight" swiper-animate-delay="2.4s">
                        <td>新技术行业<br>专家演讲会</td>
                        <td>学术<br>报告厅</td>
                        <td>9月20日</td>
                        <td>14:00-16:00</td>
                    </tr>
                    <tr class="seven ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="2.7s">
                        <td>汽车之家演<br>
                            讲会及质量<br>
                            奖颁奖仪式<br>
                            及主会场闭<br>
                            幕式</td>
                        <td>学术<br>报告厅</td>
                        <td>9月21日</td>
                        <td>14:00-16:00</td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="swiper-slide slide9" data-type="9">
            <link rel="import" href="../common/element-top.html?__inline">
            <link rel="import" href="../common/element-bottom.html?__inline">
            <link rel="import" href="../common/element-down.html?__inline">

            <div class="title ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.3s">四地七大分会场<br>精彩纷呈</div>

            <div class="map-box ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="0.6s">
                <img class="map-box-bg" src="img/slide9-map-bg.png">
                <img class="txt-1 ani alert-open" data-key="2-1" swiper-animate-effect="zoomIn" swiper-animate-delay="0.9s" src="img/slide9-txt1.png">
                <img class="txt-2 ani alert-open" data-key="2-2" swiper-animate-effect="zoomIn" swiper-animate-delay="1.2s" src="img/slide9-txt2.png">
                <img class="txt-3 ani alert-open" data-key="2-3" swiper-animate-effect="zoomIn" swiper-animate-delay="1.5s" src="img/slide9-txt3.png">
                <div class="txt-4 ani" swiper-animate-effect="zoomIn" swiper-animate-delay="1.8s">
                    <img src="img/slide9-txt4.png">
                    <div class="box">
                        <span class="alert-open" data-key="2-4"></span>
                        <span class="alert-open" data-key="2-5"></span>
                        <span class="alert-open" data-key="2-6"></span>
                        <span class="alert-open" data-key="2-7"></span>
                    </div>
                </div>

            </div>
        </div>

        <div class="swiper-slide slide10">
            <link rel="import" href="../common/element-bottom.html?__inline">

            <img class="logo ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.6s" src="/web/img/logo.png">
            <img class="time ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.3s" src="img/slide10-2022.png">
            <div class="title ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.6s">邀您一同智启未来</div>
            <div class="title date ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.9s">2018年9月17日</div>
        </div>
    </div>
</div>


<div class="alert-box disNone" id="app" v-cloak>
    <div class="cont-box animated zoomIn">
        <div class="close" @click="closeAlert()"></div>
        <div class="list" v-for="item in lists">
            <div class="txt-title">活动项目：<span v-html="item.title">}</span></div>
            <div class="txt-address">活动地点：{{ item.address }}</div>
            <div class="txt-date">活动时间：{{ item.date }}</div>
        </div>
    </div>
</div>

</body>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/vue/dist/vue.js"></script>
<script src="/node_modules/swiper/dist/js/swiper.js"></script>
<script src="/web/lib/swiper.animate1.0.2.min.js"></script>
<script src="/node_modules/video.js/dist/video.js"></script>
<script src="/web/js/config.js"></script>
<script src="index.js"></script>
</html>